import classNames from 'classnames';
import { useState } from 'react';
import { YmCssMotion } from 'ym-design';
import './appear.less';

type CompItem = { comKey: string; title: string };

const motionConfig = {
  motionName: 'node-motion',
  motionAppear: true,

  // onAppearStart: () => ({ height: 0 }),
  onAppearStart: (node: HTMLElement) => {
    console.log('--node-motion--onAppearStart--:');
    return { height: 0 };
  },
  onAppearActive: (node: HTMLElement) => {
    // onAppearStart 设置  height: 0  之后 动画进行的时候 node.offsetHeight 就一直是 0+ padding
    console.log(
      '--node-motion--onAppearActive--node.offsetHeight--:',
      node.offsetHeight,
    );
    return {
      height: 25, //node.offsetHeight  style上的height 可不是offsetHeight ， offsetHeight = height + padding + border
    };
  },
  onAppearEnd: (node: HTMLElement) => {
    console.log('--onAppearEnd--');
  },
  onLeaveStart: (node: HTMLElement) => ({ height: node.offsetHeight }),
  onLeaveActive: () => ({ height: 0 }),
};

function MotionComp(props: CompItem) {
  // useEffect(() => {
  //   console.log('--MotionComp加载--transitionHasStart--：');
  //   return () => {
  //     console.log('--MotionComp卸载--');

  //   }
  // }, [])

  const handleVisibleChanged = (newVisible: boolean) => {
    console.log('--appear--handleVisibleChanged--newVisible--:', newVisible); //源码：isMounted === false,visible === false
  };

  const { comKey, title } = props;
  if (comKey === '1') {
    return (
      <YmCssMotion
        forceRender={false}
        removeOnLeave={true}
        {...motionConfig}
        visible={true}
        onVisibleChanged={handleVisibleChanged}
      >
        {({ className: motionClassName, style: motionStyle }, motionRef) => (
          <div
            className={classNames('comp-item', motionClassName)}
            ref={(dom) => {
              if (dom) {
                motionRef(dom);
                // console.log('ref-dom --dom.offsetHeight--:', dom.offsetHeight)
                // dom.style.height = dom.offsetHeight - 10 + 'px';
              }
            }}
            style={motionStyle}
          >
            <p className={classNames('item-text')}>
              {title} - {comKey}
            </p>
          </div>
        )}
      </YmCssMotion>
    );
  }

  return (
    <div className="comp-item">
      <p className="item-text">
        {title}- {comKey}
      </p>
    </div>
  );
}

function AppearDemo() {
  const defaultCompList = [
    { comKey: '0', title: '0' },
    { comKey: '2', title: '2' },
  ];
  const [compList, setCompList] = useState<CompItem[]>(defaultCompList);

  const handleCompListAdd = () => {
    compList.splice(1, 0, { comKey: '1', title: '插入的' });
    setCompList([...compList]);
  };

  const handleCompListOrigin = () => {
    setCompList([...defaultCompList]);
  };

  return (
    <div className="appear-comp">
      <div style={{ margin: '20px 0' }}>
        <h3>初始化visible：true ,执行appear入场动画</h3>
        <p>
          1.对height
          执行动画，padding的干扰，padding设置层级不对导致height展开之后会有一个突变
        </p>
        <p>
          2.对height 执行动画 height从0-auto,要及早的在.node-motion
          设置height:0,在appearStart中设置height：0都晚了，导致dom会闪一下
        </p>
      </div>
      <p>
        <button onClick={handleCompListAdd}>
          compList中间插入一项，创建MotionComp
        </button>{' '}
        <br />
        <button onClick={handleCompListOrigin}>compList还原</button>
      </p>
      {compList.map((listItem) => (
        <MotionComp key={listItem.comKey} {...listItem} />
      ))}
    </div>
  );
}

export default AppearDemo;
